import { useState, useEffect, useCallback } from 'react';
import {  message } from 'antd';
import { Divider, List,Empty } from 'antd-mobile';
// import { useHistory } from 'react-router-dom';
import { useNavigate } from 'react-router-dom'
import { getMessage, TextWidget } from '@inbiz/react';
import { routerPrefix } from 'InbizConfig';
import { InbizIcon, useEvents } from '@inbiz/utils';
import TitleLogo from '../../web/view/TitleLogo';
import { getNewsList as getNewsListData } from '../../../service';

const list = (props: any) => {
  const history = useNavigate()
  // 列表数据
  const [listData, $listData] = useState<any[]>([]);
  const [configEvents] = useEvents(props.callBackEvents, props.emit)

  const getNewsList = useCallback(async (params: object) => {
      const newParams = (await configEvents.current?.onParams?.(params)) || params;
      const data = await (configEvents.current?.onRequest || getNewsListData)(newParams as any)
      return await configEvents.current?.onData?.(data) || data
    }, []);
  // 获取列表数据
  const getList = async (page: number) => {
    const res: News.NewsList = await getNewsList({
      categoryId: props?.fixNewKey?.map((item:any)=>{return item.id}).toString(),
      pageIndex: page,
      pageSize: props.loadNumber?.threshold,
      showNew: props.standOut?.isStandout,
      numNew: props.standOut?.threshold || undefined,
    });
    $listData(res?.ContentList);
  };

  // 初始化
  useEffect(() => {
    getList(1);
  }, [props?.fixNewKey?.length, props.loadNumber?.threshold]);

  // 查看更多 跳转
  const goMore = () => {
    if (!props.correlationPageWap) {
      message.warning(getMessage('news.tips.message_more_none'));
      return;
    }
    const [name] = props.correlationPageWap.split(',');
    let url = `${routerPrefix}${name}`;
    history(url);
  };

  return (
    <> {listData?.length>0?
      <>
      <List className="list-content">
        {listData?.map((item) => {
          return (
            <List.Item
              onClick={() => props.goToDetail(item)}
              clickable={false}
              key={item.ID}
            >
              <span className="list-item">
                {props.listLogo && <TitleLogo listLogo={props.listLogo} />}
                {props.showCate && <span>【{item.ContentCategoryName}】</span>}
                <div className="title-text">{item.Title}</div>
                <div className="title-tag">
                  {item.IsNew && <span>NEW</span>}
                </div>
              </span>
              <span className="content-time">{item.CreateTime}</span>
            </List.Item>
          );
        })}
      </List>
      {props.seeMore && props.showPositionWap === 'right-bottom' && (
        <div onClick={goMore} className={'news-list-see-more'}>
          <TextWidget>{props.showTextWap || ''}</TextWidget>&nbsp;{'>'}
        </div>
      )}
      {props.seeMore && props.showPositionWap === 'bottom-center' && (
        <div onClick={goMore}>
          <Divider
            style={{
              color: 'var(--inbiz-color-text)',
              margin: '0',
              borderColor: '#ddd',
              fontSize: '12px',
              height: '40px',
            }}
          >
            &nbsp;&nbsp; <TextWidget>{props.showTextWap || ''}</TextWidget>
            &nbsp;&nbsp;
          </Divider>
        </div>
      )}
    </>:<Empty
      image={<InbizIcon type="icon-ic-zanwushuju" style={{ fontSize: '50px' }} />}
      description={getMessage('News.noData')}
  />}</>

  );
};
export default list;
